<template>
  <div class="task">
    <div style="padding: 80px">
      <div class="title">请你试着回忆下最近(半年内)你在生活中感到最开心的一件事情，回忆的内容包括:</div>
      <p>(1) 具体情境的描述</p>
      <p>(2) 都有哪些人参与</p>
      <p>(3) 当时你实际采取了哪些行为</p>
      <p>(4) 你在当时有怎样的感受</p>
      <p>(5) 最后的结果如何</p>
      <el-button type="primary" style="margin-top: 40px; height: 40px; width: 160px;"  @click="startRecod"> 开始回答 </el-button>
    </div>

    <TaskProcess/>
    <!--回答弹窗-->
    <RecordingModel
        v-model="showRecordingModel"
        :video-name="generateVideoName() + '_回答访谈任务'"
        uploadFolder="recording"
        @confirm="showEvaluationModel = true"
    />

    <ReportModel
        v-model="showEvaluationModel"
        :key="Date.now()"
        :jsonName="generateVideoName() + '_回答访谈任务表单'"
        uploadFolder="task-json"
        :task="props.task"
    />
  </div>
</template>
<script setup>
import {computed, defineEmits, ref, defineProps, onMounted} from 'vue'
import RecordingModel from "@/views/task/component/Report/RecordingModel.vue";
import ReportModel from "@/views/task/component/Report/ReportModel.vue";
import useUserStore from "@/stores/user.js";
import TaskProcess from "@/views/task/component/TaskProcess.vue";
import { useVideoRecorder } from '@/hooks/useVideoRecorder'
const userStore = useUserStore()
const props = defineProps({
  task: {
    type: Object,
    default: () => ({}),
  }
})



// 生成视频文件名
const generateVideoName = () => {
  const timestamp = Date.now();
  return `${userStore.userInfo.data.account}_${props.task.id}_${timestamp}`;
};


//评价弹窗
const showEvaluationModel = ref(false)

//回答录音弹窗
const showRecordingModel = ref(false)

// 使用视频录制hooks
const { startRecording, stopAndUpload} = useVideoRecorder({
  uploadFolder: 'wacheVideo',
  videoName: generateVideoName() + '_观看访谈题目'
});


const startRecod = async ()=> {
  await stopAndUpload();
  showRecordingModel.value = true
}


onMounted(async ()=> {
  await startRecording()
})


</script>
<style scoped lang="scss">
.task{
  display: flex;
  flex-direction: column;
  height: 100%;
  //padding: 83px ;
  position: relative;

}
.title{
  font-size: 24px;
  margin-bottom: 20px;

}
p{
  line-height: 36px;
  font-size: 18px;
}
</style>